<template>
  <div>
    <div>
      <div class="btns-area">
        <slot name="btns"></slot>
      </div>
      <div class="filter-area">
        <filter-tool :data="filterItems" v-on:handleFilter="handleFilter" />
      </div>
    </div>
    <div class="table-area">
      <slot name="table"></slot>
    </div>
    <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="panigationQuery.pageNo"
        :page-sizes="[10, 20, 50]"
        :page-size="panigationQuery.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="panigationResult.total"
      ></el-pagination>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'

import FilterTool from '@/components/FilterTool/index.vue'
@Component({
  name: 'List',
  components: {
    //引用的组件在这里声明
    FilterTool
  }
})
export default class extends Vue {
  @Prop({ default: [] }) private filterItems: any
  @Prop({
    default: () => {
      return {
        pageNo: 1,
        pageSize: 10
      }
    }
  })
  private panigationQuery: any
  @Prop({
    default: () => {
      return {
        total: 0
      }
    }
  })
  private panigationResult: any
  mounted() {}
  private handleSizeChange(val: any) {
    this.$emit('updatePanigationQuery', {
      pageSize: val,
      pageNo: 1
    })
    this.$emit('queryList')
  }
  handleCurrentChange(val: number) {
    this.$emit('updatePanigationQuery', {
      pageNo: val
    })
    this.$emit('queryList')
  }
  handleFilter(params: any) {
    this.$emit('updatefilterQuery', params)
    this.$emit('updatePanigationQuery', {
      pageNo: 1
    })
    this.$emit('queryList')
  }
}
</script>
